<template>
	<view class="gift-main">
		<van-swipe class="my-swipe" :show-indicators="false" :loop="false">
			<van-swipe-item v-for="item in state.listLen" :key="item">
				<view class="gift-main-list">
					<view class="gift-item" :class="itemChild.ID == state.curItem.ID ? 'gift-item-img-cur' : ''"
						v-for="itemChild in state.listData.slice((item - 1) * 6, item *6)" :key="itemChild.ID"
						@click="selectGift(itemChild)">
						<view class="gift-item-img"><img class="gift-img" :src="itemChild.ImgUrl" /></view>
						<view class="gift-item-bottom">
							<view class="gift-item-bottom-title">{{ itemChild.GiftName }}</view>
							<view class="gift-item-bottom-pay">
								<img src="@/assets/image/icon25.png" alt=""><text>{{ itemChild.Money }}</text>
							</view>
						</view>
					</view>
				</view>
			</van-swipe-item>
		</van-swipe>
	</view>
</template>

<script setup>
	import {
		GiftList
	} from "@/api/im/index.js"

	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import {
		showLoadingToast,
		closeToast
	} from 'vant';

	import PaySend from '@/pages/home/components/paySend/index.vue'

	let {
		proxy
	} = getCurrentInstance()

	import {
		onLoad
	} from '@dcloudio/uni-app'

	const emits = defineEmits(["update:itemCurGift"])

	const state = reactive({
		show: false,
		curIndex: false,
		listData: [],
		listLen: 0,
		curItem: {}
	})

	onMounted(() => {
		GiftListFn()
	})

	const GiftListFn = async () => {
		showLoadingToast({
			duration: 0,
			forbidClick: true,
			message: '加载中',
		});
		let data = await proxy.$get(GiftList)
		closeToast();
		if (data.code == 200) {
			state.listData = data.data
			state.listLen = Math.ceil(state.listData.length / 6);
		}
	}

	// 选择礼物
	const selectGift = (item) => {
		state.curItem = item
		emits("update:itemCurGift", item)
	}
</script>

<style lang="scss" scoped>
	.gift-main-list {
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0;

		.gift-item {
			width: calc(33.33% - 40rpx);
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.gift-item-img {
				display: block;
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					position: absolute;
					width: 120rpx;
					transition: all .2s;
				}
			}

			.gift-item-bottom {
				text-align: center;

				.gift-item-bottom-title {
					font-size: 24rpx;
					color: #262626;
					padding: 12rpx 0;
				}

				.gift-item-bottom-pay {
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 20rpx;
						color: #999999;
					}
				}
			}

		}

		.gift-item-img-cur {
			background: #eee;
			border-radius: 8rpx;

			.gift-item-img {
				img {
					transform: scale(1.3, 1.3);
				}
			}
		}
	}

	.my-swipe {
		width: 100%;
		min-height: 400rpx;
		background-color: #ffffff;

		.van-swipe-item {
			width: 100%;
		}
	}
</style>
